<template>
  <el-select v-model="value" placeholder="请选择所属应用" :clearable="clearable" :filterable="filterable" @change="queryChange">
    <el-option v-for="(item, index) in options" :key="index" :label="item.appName" :value="item.id" />
  </el-select>
</template>
<script>
import { defineComponent, computed, watch, ref, reactive } from "vue";
import { getAppPageList } from "@/api/application";
export default defineComponent({
  name: "ApplicationSelect",
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: true
    },
    filterable: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue', 'refresh'],
  setup(props, { emit }) {
    const value = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    })
    const options = ref([]);

    const getInfo = async (para) => {
      const res = await getAppPageList({ current: 1, size: 999 });
      // console.log(res.data.list)
      options.value = res.data.list;
    };
    getInfo();
    const queryChange = (val) => {
      emit("refresh", val)
    }
    return {
      value,
      options,
      queryChange
    };
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-table) thead th {
  background: #f2f3f5;
  color: #333;
}

.pagination-container {
  padding-top: 20px;
  text-align: right;
  min-height: 48px;
}

.pagination-container.hidden {
  display: none;
}

.el-pagination {
  padding: 0;
}

.tag {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  width: 40px;
  text-align: center;
  font-size: 12px;
  border-radius: 2px;

  &.blue {
    color: #5573e4;
    background: rgba(85, 115, 228, 0.1);
    border: 1px solid rgba(85, 115, 228, 0.6);
  }

  &.yellow {
    color: #f7b500;
    background: rgba(247, 181, 0, 0.1);
    border: 1px solid rgba(247, 181, 0, 0.6);
  }
}
</style>